<template>
    <div class="head">
        <div class="back">
            <i class="iconfont">&#xe63c;</i>
        </div>
       <div class="search-input">
           <i class="iconfont search">&#xe62f;</i>
           <p>输入游玩的景点和城市</p>
       </div>
       <div class="city">
           <p>城市</p>
           <i class="iconfont down">&#xe607;</i>
       </div>
    </div>
</template>
<script>
export default {
  name: "HomeHead"
};
</script>
<style lang="scss" scoped>
@mixin padding-lr($pd) {
  padding-left: $pd;
  padding-right: $pd;
}
.head {
    height: 88px;
    background: #03bbd5;
    display: flex;
    align-items: center;
}
.search-input {
    display: flex;
    height: 66px;
    background: #fff;
    flex: 1;
    align-items: center;
    color: rgb(168, 168, 167);
    .search {
        font-size: 30px;
        @include padding-lr(20px);
    }
    border-radius: 15px;
}
.back {
    text-align: center;
    color: #fff;
    width: 13.33vw;
    .iconfont {
        font-size: 5.333vw;
    }
}

.city {
    width: 20vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    .down {
        font-size: 20px;
        padding-left: 10px;
    }
}
</style>
